<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>审批中心</title>
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="./css/headersearch.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="css/customerservicelist.css" />
    <link rel="stylesheet" type="text/css" href="css/editStyle.css" />
    <link rel="stylesheet" type="text/css" href="css/home_task_con.css" />
    <style>
        .new-btn-bottom {
            width: 92%;
            margin: 0 auto;
            display: flex;
            margin-top: 15px;
            flex-direction: row;
            justify-content: center;
        }

        .new-blue-btn {
            width: 50%;
            text-align: center;
            margin: 0 5px;
            /* font-weight: bold; */
        }
        .time_style{
            float:right;
            color: #a2acbb;
        }
        .workheader{
            width: 100%;  
            margin: 10px 0px 5px 0px;
            overflow: hidden;
        }
        .work_title_add{
            width: 80%;
            font-size: 0.8rem;
            font-weight:500;
            margin-top: 0px;
        }
        .mt0{
            margin-top: 0.1rem;
        }
        .padding_style{
            padding-bottom: 1rem;
            padding-top: 0.8rem;
        }
        .marginheight{
            margin-top: 0.3rem;
        }
        .mainbox{
            width: 92%;
            margin: 0 auto;
            margin-top: 15px;
            padding: 20px 16px 20px 16px;
        }
        .checkmain{
            width: 92%;
            margin: 0 auto;
            margin-top: 15px;
        }
        .checkmain input.aui-checkbox{
            width: 20px;
            height: 20px;
            float: left;
        }
        .checkmain label{
            width: 90%;
            color: #999;
            margin-left: 10px;
        }
        .work_title {
            width: 100%;
            color: #393939;
            height: 15px;
            line-height: 15px;
            margin: 15px 0px 20px 0px;
            padding-left: 10px;
            border-left: solid 0.1rem #289FFF;
            font-weight:bold;
        }
        .gj_box {
            padding: 10px !important;
        }
        .task_process_basic_title_time {
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            border: dashed 0.5px #289fff;
            text-align: center;
            color: #289fff;

        }
        .col-star{
              width: 8px;
              height: 8px;
              margin-top: 10px;
              margin-left: 5px;
          }
          .task_process_basic_title_name span {
            color: #999;
            font-size: 0.6rem;
        }
        /*工单进度样式*/
.processul {
    width: 100%;
    margin: 0 auto;
}

.processulli {
    position: relative;
    padding: 0 15px;
    padding-right:0;
    list-style: none;
    /*border-left: 2px solid #F1F1F1;*/
}

    .processulli:before {
        /*content: "√";*/
        content: "";
        display: block;
        position: absolute;
        margin-left: -6px;
        top: 0;
        left: -5px;
        width: 10px;
        height: 10px;
        line-height: 22px;
        text-align: center;
        background: #F1F1F1;
        color: #fff;
        font-size: 14px;
        border-radius: 50%;
        border: solid 5px #fff;
    }
    .task_process_con {
    /*width: 92%;*/
    width: 100%;
    margin: 0 auto;
}
.task_process_basic_title{
/*  height:2rem;
  line-height: 2rem;*/
  /*padding: 0 0.5rem;*/
  font-size:0.8rem;
}
        .shenpi{
            float: left;
        }

        .shenpi_person{
            position: relative;
            width: 40px;
            margin-right: 2px;
            margin-left: 2px;
            text-align: center;
            /* padding-left: 5px; */

        }
        .person{
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 0.6rem;
            border-radius: 5px;
            text-align: center;
            color: #fff;
            background:#289fff;
            margin-left: 2px;
        }
        .person_name{
            width: 38px;
            text-align: center;
            font-size: 0.6rem;
            height: 30px;
            line-height: 30px;
        }
        .ellipsis-1{
            width: 38px;
            text-align: center;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .shenpi_person img{
            position: absolute;
            width: 18px;
            height: 18px;
            right: 0px;
            top:-8px;
            overflow: hidden;
        }
        .small_active{
            font-size: 0.5rem;
        }

    </style>
</head>

<body>
    <div id="app" v-cloak>
            <div class="aui-content task">
                <div class=" boxarea mainbox">
                    <div class="work_con_box">
                        <div class="workheader">
                            <div v-if="IsReject==0" class="work_title_add ellipsis_one fl" >审批建议-同意</div>
                            <div  v-if="IsReject==1" class="work_title_add ellipsis_one fl" >审批建议-拒绝</div>
                           <!-- <div class="time_style">0/60</div> -->
                            <!-- <div v-if="item.ServiceStatus==50" class="typestatus ygd">已关单</div>   style="font-weight: bold;"-->
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-input">
                                <textarea placeholder="请填写记录(选填信息)" style="height: 6rem;" v-model="AcceptCont"></textarea>
                            </div>
                        </div>
                        <!-- <div class="work_title work_title_add">{{item.TypeName}}</div> -->
                        
                        <!-- <div class=" work_con_box_contain mt0 padding_style ">

                            <div class=" marginheight">
                                <div class="work_con_box_left">优惠项目</div>
                                <div class="work_con_box_right">
                                    <label>物业费、水费、电费</label>
                                </div>
                            </div>
                            <div class=" marginheight">
                                <div class="work_con_box_left">优惠说明</div>
                                <div class="work_con_box_right">
                                    <label>10元固定项目的优惠申请</label>
                                </div>
                            </div>

                        </div> -->

                    </div>

                    <!-- <div class="new-btn-bottom" style="overflow: hidden;">
                        <div class="work_beginbtnty3 new-blue-btn"
                            v-on:click="do_open_dialog(item.ID)">
                            <i class="icon iconfont icon-guanbi"
                                style=" font-size: 0.7rem; margin-right: 5px; color: #289FFF;"></i>拒绝
                        </div>   
                    </div> -->
                </div>
               
                <div  v-if="IsReject==0" class="checkmain">
                    <input class="aui-checkbox" type="checkbox" @click = "checkbox()" v-model="ischecked">
                    <label>
                        启用多级审批后，可提交审批申请信息至下一个审批人。
                    </label>
                </div>

                 <!-- 审批 -->
        <div v-if="ischecked" class=" boxarea edit">
            <div class="aui_formitem only_line no_line p0">
                <div class="work_title">审批流程</div>

                <div class="gj_box">
                    <ul class="processul">
                        <li class="processulli  li-border-color-grey">
                            <div class="task_process_con">
                                <div class="handle">
                                    <div class="task_process_basic_title">
                                        <div class="task_process_basic_title_name fl">
                                            <div class="fl aui_formtitle" style="min-width: 2rem;">审批人<img
                                                    class="col-star" src="../image/redstar.png"></div>
                                            <div class="handle_con_msg ">
                                                <span v-if="choose_id_list.length==0">请选择审批人</span>
                                                <span v-if="choose_id_list.length>0">1人通过即可</span>
                                            </div>
                                        </div>
                                        <div class="fr" style="width: 70%;">
                                            <div class="task_process_basic_title_time ccc fr"
                                                v-on:click="choose_persons(1)"><i class="icon iconfont icon-addApp"></i>
                                            </div>



                                            <div v-if="choose_id_list.length<=3" class="shenpi"
                                                v-for="(item,index) in choose_id_list">
                                                <div class="shenpi_person">
                                                    <div class="person">{{item.UserName.slice(-2)}}</div>
                                                    <div class="person_name ellipsis-1">{{item.UserName}}</div>
                                                    <img v-on:click="guanbi_pic(item.UserID,1)" src="../image/cx.png">
                                                    <!-- <i class="icon iconfont icon-guanbi" ></i> -->
                                                </div>
                                            </div>
                                            <div v-if="choose_id_list.length>3">
                                                <div class="shenpi">
                                                    <div class="shenpi_person">
                                                        <div class="person" v-bind:class="{'small_active':choose_id_list.length>99}" v-on:click="open_more(1)">{{choose_id_list.length}}人</div>
                                                        <div class="person_name ellipsis-1">全部</div>
                                                    </div>
                                                </div>
                                                <div class="shenpi" v-for="(item,index) in choose_id_list.slice(-2)">
                                                    <div class="shenpi_person">
                                                        <div class="person">{{item.UserName.slice(-2)}}</div>
                                                        <div class="person_name ellipsis-1">{{item.UserName}}</div>
                                                        <img v-on:click="guanbi_pic(item.UserID,1)"
                                                            src="../image/cx.png">
                                                        <!-- <i class="icon iconfont icon-guanbi" ></i> -->
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="cl"></div>
                                    </div>
                                </div>
                                <div class="hide_height"></div>
                            </div>
                        </li>

                        <li class="processulli  li-border-color-grey">
                            <div class="task_process_con">
                                <div class="handle">
                                    <div class="task_process_basic_title">
                                        <div class="task_process_basic_title_name fl">
                                            <div class="fl">抄送人</div>
                                            <div class="handle_con_msg ">
                                                <span v-if="select_id_list.length==0">请选择抄送人</span>
                                                <span v-if="select_id_list.length>0">已选{{select_id_list.length}}人</span>
                                            </div>
                                        </div>
                                        <div class="fr" style="width: 70%;">
                                            <div class="task_process_basic_title_time ccc fr" style="margin-left: 15px;"
                                                v-on:click="choose_persons(0)"><i class="icon iconfont icon-addApp"></i>
                                            </div>

                                            <div v-if="select_id_list.length<=3" class="shenpi"
                                                v-for="(item,index) in select_id_list">
                                                <div class="shenpi_person">
                                                    <div class="person">{{item.UserName.slice(-2)}}</div>
                                                    <div class="person_name ellipsis-1">{{item.UserName}}</div>
                                                    <img v-on:click="guanbi_pic(item.UserID,0)" src="../image/cx.png">
                                                    <!-- <i class="icon iconfont icon-guanbi" v-on:click="guanbi_pic(index,0)"></i> -->
                                                </div>
                                            </div>
                                            <div v-if="select_id_list.length>3">
                                                <div class="shenpi">
                                                    <div class="shenpi_person">
                                                        <div class="person" v-bind:class="{'small_active':select_id_list.length>99}" v-on:click="open_more(0)">{{select_id_list.length}}人</div>
                                                        <div class="person_name ellipsis-1">全部</div>
                                                        <!-- <img  v-on:click="guanbi_pic(index,0)" src="../image/cx.png"> -->
                                                    </div>
                                                </div>
                                                <div class="shenpi" v-for="(item,index) in select_id_list.slice(-2)">
                                                    <div class="shenpi_person">
                                                        <div class="person">{{item.UserName.slice(-2)}}</div>
                                                        <div class="person_name ellipsis-1">{{item.UserName}}</div>
                                                        <img v-on:click="guanbi_pic(item.UserID,0)"
                                                            src="../image/cx.png">
                                                        <!-- <i class="icon iconfont icon-guanbi" v-on:click="guanbi_pic(index,0)"></i> -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="cl"></div>
                                    </div>
                                </div>
                                <div class="hide_height"></div>
                            </div>
                        </li>
                    </ul>

                </div>


                <div class="aui_formitem no_line">
                </div>
            </div>
        </div>










               

                <div class="bottom">
                    <div class="aui_bottombtn" v-on:click="do_save()">保存</div>
                </div>





            </div>
    </div>
</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vue.js "></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-dialog.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="../script/aui-popup.js"></script>
<script type="text/javascript " src="js/examine_yes.js"></script>

</html>